<template>
	<view class="shopping-main">
		<view class="tabs">
			<view @click="change(0)" class="tab1"
				:class="[type==0? 'xjs-btn-primary':'xjs-btn-primary-plain']">工作室首页</view>
			<view @click="change(1)" class="tab2"
				:class="[type==1? 'xjs-btn-primary':'xjs-btn-primary-plain']">在线商城</view>
		</view>
		<swiper class="swiper" :current="type" :indicator-dots="false" :disable-touch="true" :autoplay="false" style="height:calc(100vh - 220rpx);">
			<swiper-item>
				<secondHome :scrollHeight="'calc(100vh - 220rpx)'" ref="secondHomeRef" />
			</swiper-item>
			<swiper-item>
				<onlineMall :scrollHeight="'calc(100vh - 220rpx)'" ref="onlineMallRef" />
			</swiper-item>
		</swiper>
	</view>
</template>

<script lang="ts" setup>
	import { ref } from 'vue'
	import secondHome from '@/pages/home/components/secondHome.vue'
	import onlineMall from '@/pages/onlineMall/components/onlineMall.vue'
	const type = ref(0)
	const secondHomeRef = ref()
	const onlineMallRef = ref()
	const init = async () => {
		secondHomeRef.value && secondHomeRef.value.init()
	}
	const change = (can : number) => {
		type.value = can
		if (can == 1) {
			onlineMallRef.value && onlineMallRef.value.init()
		} else {
			secondHomeRef.value && secondHomeRef.value.init()
		}

	}
	defineExpose({ init })
</script>

<style lang="scss" scoped>
	.shopping-main {
		.tabs {
			background-color: #fff;
			height: 100rpx;
			padding: 0 32rpx;
			box-sizing: border-box;
			display: flex;

			// align-items: center;
			.tab1 {
				border-radius: 12rpx 0 0 12rpx;
				height: 80rpx;
				font-size: 26rpx;
			}

			.tab2 {
				border-radius: 0 12rpx 12rpx 0;
				height: 80rpx;
				font-size: 26rpx;
			}
		}
	}
</style>